<!--
 * @Description: 
 * @Author: Liu Kunpeng
 * @Date: 2021-07-06 10:47:00
-->
<template>
    
    <div>
        <!-- <h3>欢迎使用医疗器械管理系统</h3> -->

        <div class="box">
            <el-card class="card1" shadow="hover">
                <span>记录总数</span> 
                <el-divider></el-divider>
                <div >
                    <p class="count">足底压力：<router-link :to="'/data/DataManage01'" >{{footPatientCount}}</router-link></p>
                    <p class="count">三维扫描： <router-link :to="'/data/DataManage02'" >{{threePatientCount}}</router-link></p>
                </div>
            </el-card>
        </div>
        <div class="box">
            <el-card class="card1" shadow="hover">
                <span>设备信息</span>
                <el-divider></el-divider>
                <div >
                    <p class="count">足底压力：<router-link :to="'/device/Device01'" >{{footDeviceCount}}</router-link>&nbsp;台</p>
                    <p class="count">三维扫描： <router-link :to="'/device/Device02'" >{{threeDeviceCount}}</router-link>&nbsp;台</p>
                </div>
            </el-card>
        </div>
        
    </div>
</template>

<script>
import { getDevCountApi, getPatientCountApi } from '@/api/home'
export default {
    data(){
        return{
            footPatientCount: 0,
            threePatientCount:0,
            footDeviceCount:0,
            threeDeviceCount:0,
        }
    },
    methods: {
        getPatientCount(){
            getPatientCountApi().then(res=>{
                this.footPatientCount = res.data.patFootCounts
                this.threePatientCount = res.data.patThreeCounts
            })
        },
        getDeviceCount(){
            getDevCountApi().then(res=>{
                this.footDeviceCount = res.data.devFootCounts
                this.threeDeviceCount = res.data.devThreeCounts
            })
        },
    },
    created(){
        this.getPatientCount();
        this.getDeviceCount()
    }

}
</script>


<style lang="less" scoped>
.box{
    float: left;
    margin-top: 10px;
}
.card1{
    width: 350px;
    height: 250px;
    margin-left: 30px;
    margin-bottom: 20px;
    overflow:auto;
}
.count{
    font-size: 130%;
    font-weight: 600;
    color: #909399;
}
.count1{
    font-size: 130%;
    font-weight: 600;
    color: #909399;
}
</style>